<template>
  <div class="app-container">
    <el-tabs v-model="activeTab">
      <el-tab-pane label="基本信息" name="userDetail">
        <div>
          <el-col :span="10">
            <div class="row_s">
              <p class="word_s"><span>用户ID</span></p>
              <p class="right_column_s">
                <span>{{ user.id }}</span>
              </p>
            </div>

            <div class="row_s">
              <p class="word_s"><span>姓名</span></p>
              <p class="right_column_s">
                <span>{{ user.realname }}</span>
              </p>
            </div>

            <div class="row_s">
              <p class="word_s"><span>微信号</span></p>
              <p class="right_column_s">
                <span>{{ user.wxCode || "无" }}</span>
              </p>
            </div>

            <div class="row_s">
              <p class="word_s"><span>手机号</span></p>
              <p class="right_column_s">
                <span>{{ user.mobile || "无" }}</span>
              </p>
            </div>

            <div class="row_s">
              <p class="word_s"><span>邮箱</span></p>
              <p class="right_column_s">
                <span>{{ user.email }}</span>
              </p>
            </div>
            <div class="row_s">
              <p class="word_s"><span>剩余学术币</span></p>
              <p class="right_column_s">
                <span>{{ user.academicCurrency || 0 }}</span>
              </p>
            </div>

            <div class="row_s">
              <p class="word_s"><span>累计使用学术币</span></p>
              <p class="right_column_s">
                <span>{{ user.useOfAcademicCoins || 0 }}</span>
              </p>
            </div>

            <div class="row_s">
              <p class="word_s"><span>查重券</span></p>
              <p class="right_column_s">
                <span>{{ user.duplicateCheckCoupon }}</span>
                <span>
                  <el-button
                    size="mini"
                    icon="el-icon-edit"
                    style="margin-left: 20px"
                    @click="updateOperation('duplicateVisiable')"
                    v-hasPermi="['userManager:user:duplicateCheckCoupon']"
                  >
                    设置查重券
                  </el-button>
                </span>
              </p>
            </div>

            <div class="row_s">
              <p class="word_s"><span>欠款状态</span></p>
              <p class="right_column_s">
                <span>{{ arrears[user.arrears] }}</span>
              </p>
            </div>
          </el-col>
          <el-col :span="10">
            <div class="row_s">
              <p class="word_s"><span>单位</span></p>
              <p class="right_column_s">
                <span>{{ user.organizationCode }}</span>
              </p>
            </div>

            <div class="row_s">
              <p class="word_s"><span>身份</span></p>
              <p class="right_column_s" v-if="identityMap[user.identity]">
                <span>{{ identityMap[user.identity]["identityName"] }}</span>
              </p>
            </div>

            <div class="row_s">
              <p class="word_s"><span>推荐人id</span></p>
              <p class="right_column_s">
                <span>{{ user.recommendedUserId || "无" }}</span>
                <el-button
                  style="margin-left: 10px"
                  size="mini"
                  @click="updateOperation('recommendVisiable')"
                  v-hasPermi="['userManager:user:recommend']"
                  v-if="!user.recommendedUserId"
                  >编辑</el-button
                >
              </p>
            </div>

            <div class="row_s">
              <p class="word_s"><span>会员类型</span></p>
              <p class="right_column_s">
                <span>{{
                  user.teamId != null && user.teamId != 0
                    ? "签约会员"
                    : "普通会员"
                }}</span>
              </p>
            </div>

            <div class="row_s">
              <p class="word_s"><span>所属团队</span></p>
              <p class="right_column_s">
                <span>{{ user.teamName || "" }}</span>
              </p>
            </div>
            <div class="row_s">
              <p class="word_s"><span>注册时间</span></p>
              <p class="right_column_s">
                <span>{{ user.createTime }}</span>
              </p>
            </div>

            <div class="row_s">
              <p class="word_s"><span>最后登录</span></p>
              <p class="right_column_s">
                <span>{{ user.lastLoginTime }}</span>
              </p>
            </div>
            <div class="row_s">
              <p class="word_s"><span>登录次数</span></p>
              <p class="right_column_s">
                <span>{{ user.loginNum }}</span>
              </p>
            </div>
            <div class="row_s">
              <p class="word_s"><span>个人折扣</span></p>
              <p class="right_column_s">
                <span>{{
                  user.discount && user.discount !== 100
                    ? user.discount / 10 + "折"
                    : "无"
                }}</span>

                <el-button
                  style="margin-left: 10px"
                  size="mini"
                  @click="updateOperation('discountVisiable')"
                  v-hasPermi="['userManager:user:discount']"
                  >编辑</el-button
                >
              </p>
            </div>
          </el-col>
        </div>

        <div class="clean">
          <el-row>
            <el-form ref="form" :model="form" label-width="100px">
              <el-form-item label="科藤备注：" class="remark_s">
                <el-input
                  type="textarea"
                  v-model="form.remark"
                  rows="6"
                  style="width: 80%"
                />
              </el-form-item>
            </el-form>
          </el-row>
        </div>

        <!-- 设置查重券  -->
        <conpon
          :visiable="duplicateVisiable"
          title="设置查重券"
          :row="user"
          :requestURL="duplicateURL"
          column="duplicateCheckCoupon"
          @updateData="updateConpon"
          @close="closeConpon"
        ></conpon>
      </el-tab-pane>
      <!-- 设置推荐人  -->
      <conpon
        :visiable="recommendVisiable"
        title="设置推荐人"
        :row="user"
        :requestURL="updateRecommendURL"
        column="recommendedUserId"
        @updateData="updateConpon"
        @close="closeRecommend"
      >
      </conpon>

      <el-tab-pane label="订单信息" name="orderInfo">
        <orderDetail :id="user['id']"></orderDetail>
      </el-tab-pane>
    </el-tabs>

    <!-- 设置折扣  -->
    <zk-dialog
      :visible="discountVisiable"
      title="设置折扣"
      onceLabel="用户ID"
      :id="user.id"
      :onceContent="user.id"
      :twiceContent="
        user.discount && user.discount !== 100 ? user.discount / 10 : null
      "
      oncePlaceholder="获取用户ID失败"
      :onceDisabled="true"
      twiceLabel="设置折扣"
      twicePlaceholder="请设置折扣"
      twiceType="number"
      @cancel="closeDiscount"
      @confirm="updateDiscountData"
    >
    </zk-dialog>

    <div slot="footer" class="dialog-footer algin">
      <el-button @click="cancel">关闭</el-button>
      <el-button
        type="primary"
        v-hasPermi="['userManager:user:edit']"
        @click="submitForm"
        >保存</el-button
      >
    </div>
  </div>
</template>
<script>
import { listUser, updateUser } from "@/api/user";
import { ARRERS } from "../../constant/const";
import RequestRemote from "@/utils/request";
export default {
  name: "User",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      activeTab: "userDetail",

      // 设置查重券
      duplicateURL: "/userManager/user/duplicateCheckCoupon",
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 用户管理表格数据
      user: {},
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      //  查重券 弹框
      duplicateVisiable: false,

      recommendVisiable: false,
      updateRecommendURL: "/userManager/user/updateRecommend",

      // 折扣
      discountVisiable: false,
      updateDiscountURL: "/userManager/user/configDiscount",

      // 当前点击行的id
      clickId: 0,

      form: {
        id: 0,
        remark: "",
      },

      identitys: [],
      identityMap: {},
      arrears: ARRERS,
    };
  },
  created() {
    this.identityMap = JSON.parse(localStorage.getItem("identitys"));
  },
  mounted() {
    let row = localStorage.getItem("selectItem");

    this.user = JSON.parse(row);

    this.form.remark = this.user.remark;

    this.form.id = this.user.id;
  },

  components: {
    conpon: () => import("./component/conpon.vue"),
    orderDetail: () => import("./component/orderDetail.vue"),
    "zk-dialog": () => import("@/components/zkDialog/index.vue"),
  },

  methods: {
    updateConpon(item, column, value) {
      item[column] = parseInt(value);
      localStorage.setItem("selectItem", JSON.stringify(item));
    },

    closeConpon(visiable) {
      this.duplicateVisiable = visiable;
    },

    /**
     * 设置查重券
     * @param {{}} item
     * @param {String} key
     */
    updateOperation(key) {
      this.clickId = parseInt(this.user.id);
      this[key] = true;
    },

    updateDiscountData(id, discount) {
      console.log("666");
      RequestRemote.get(this.updateDiscountURL, {
        id,
        discount: discount ? discount * 10 : 100,
      }).then((res) => {
        this.$message.success("操作成功");
        this.user["discount"] = discount ? discount * 10 : null;
        this.closeDiscount();
      });
    },

    /** 查询用户管理列表 */
    getList() {
      this.loading = true;
      listUser(this.queryParams).then((response) => {
        this.userList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.$router.push({
        path: "/user/index",
      });
    },

    closeConpon(visiable) {
      this.duplicateVisiable = visiable;
    },

    closeRecommend(visiable) {
      this.recommendVisiable = visiable;
    },

    closeDiscount() {
      this.discountVisiable = false;
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (!valid) {
          return;
        }
        updateUser(this.form).then((res) => {
          this.$message.success(res.msg);
          this.$router.back();
        });
      });
    },
  },
};
</script>

<style scoped>
@import url("../../assets/styles/row_c.css");
</style>
